<template>
  <div >
    <el-card class="box-card">
      <template #header>
        <div class="leve_title">
          <span>{{ title }}</span>
        </div>
      </template>
      <div>
        <el-form ref="formQuery" label-width="95px" :model="formList">
          <el-row :gutter="24" justify="space-around">
            <el-col v-bind="colLayout">
              <div>
                <el-form-item class="customerDiv3" label="需求编号" prop="number">
<!--                  <el-input clearable @keyup.enter="query" v-model.trim="formList.order_no" />-->
                  <VabSelectForm  v-model="formList.order_no" :options="settleOrgUidList" :multiple="false"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout">
              <div>
                <el-form-item class="customerDiv3" label="需求状态" prop="state">
                  <VabSelectForm  v-model="formList.state" :options="statusList" :multiple="true"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout">
              <div>
                <el-form-item class="customerDiv3" label="销售组织" prop="sales_org_id">
                  <VabSelectForm  :multiple="true"  v-model="formList.sales_org_id" :options="sales_org_list"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout" v-if="retract">
              <div>
                <el-form-item class="customerDiv3" label="客户" prop="buyer_customer_id">
                  <VabSelectForm   :multiple="true" v-model="formList.buyer_customer_id" :options="customer_list"/>
                </el-form-item>
              </div>
            </el-col>
            <!--**************************-->
            <el-col v-bind="colLayout" v-if="retract">
              <div>
                <el-form-item class="customerDiv3" label="产品名称" prop="product_name">
                  <SelectLoading type="name"  style="width: 100%" :multiple="true" v-model="formList.product_name"  userOrgId="1" />
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout" v-if="retract">
              <div>
                <el-form-item class="customerDiv3" label="产品编码" prop="product_code">
                  <SelectLoading type="number"  style="width: 100%" :multiple="true" v-model="formList.product_code"  userOrgId="1" />
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout" v-if="retract">
              <div>
                <el-form-item class="customerDiv3" label="条码" prop="barcode">
                  <SelectLoading type="barcode"  style="width: 100%" :multiple="true" v-model="formList.barcode"  userOrgId="1" />
                </el-form-item>
              </div>
            </el-col>
            <!--    ********************-->
            <el-col v-bind="colLayout" v-if="retract">
              <div>
                <el-form-item class="customerDiv3" label="客户下单时间" prop="time">
                  <el-date-picker
                    v-model="formList.time"
                    range-separator="-"
                    style="width: 100%"
                    type="daterange"
                  />
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout" v-if="retract">
              <div>
                <el-form-item label="销售金额" prop="amount" style="display: flex; flex-wrap: nowrap">
                  <el-input-number style="flex: 1" :controls='false' type="number" :min="0"  v-model="formList.order_price_start" clearable class="input_many" />
                  <span>
                    -
                  </span>
                  <el-input-number style="flex: 1"  :controls='false' type="number" :min="0" v-model="formList.order_price_end" class="input_many" clearable />
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout" v-if="retract">
              <div>
                <el-form-item class="customerDiv3" label="销售员" prop="create_name">
                  <VabSelectForm :multiple="true"  v-model="formList.undertaker_name" :options="undertaker_name_list"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind="colLayout" v-if="retract">
              <div>
                <el-form-item class="customerDiv3" label="订单编号" prop="order_num">
<!--                  <el-input clearable @keyup.enter="query" v-model.trim="formList.order_num" />-->
                  <VabSelectForm  v-model="formList.order_num" :options="uidList" :multiple="false"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col  v-bind="colLayout" v-if="retract">
              <div>
                <el-form-item class="customerDiv3" label="订单流转状态" prop="order_state">
                  <VabSelectForm  v-model="formList.order_state" :options="order_status_list" :multiple="true"/>
                </el-form-item>
              </div>
            </el-col>
            <el-col v-bind=" retract? colLayout1 :colLayout2 ">
              <div class="button-query">
                <VabButton
                  title="查询" @click="query"  type="primary">
                </VabButton>
                <VabButton
                  title="重置"  @click="resetting" />
                <div class="sqFontSize" @click="retractClick">
                  更多
                  <el-icon v-if="retract"><ArrowUp /></el-icon>
                  <el-icon v-else><ArrowDown /></el-icon>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import {customer_optionsList} from "/@/api/dms/customer";
import {organization_list} from "/@/api/dms/organization";
import {options_list} from "/@/api/dms/options";
import {getProductList} from "/@/api/dms/product";
import SelectLoading from '/@/components/lazySelect/demo.vue'
import {customerOptions} from "/@/api/dms/customerOrder";
import {orderGroupOptions} from "/@/api/dms/order/group";
defineOptions({
  name: 'CustomerOrderQuery',
})
// 定义查询标题
const title = ref('客户订单')
const props = defineProps(['title'])
const $emits = defineEmits(['queryClick','resettingClick'])
watchEffect(() => {
  title.value = props.title
})
const colLayout = {    xs: 24,    sm: 12,    md: 8,    lg: 6,    xl: 6, span:8 }
const colLayout2 = {    xs: 24,    sm: 12,    md: 24,    lg: 6,    xl: 6, span:8 }
const colLayout1 = {    xs: 24,    sm: 24,    md: 24,    lg: 24,    xl: 24, span:8 }
//收起
const retract = ref(false)
const retractClick = ()=>{
  retract.value = ! retract.value
}
// 表单
const formQuery = ref<any>(null)
const formList = ref({
  state:'',//状态，
  product_code:'',// 产品编码
  product_name:'',// 产品名称
  time:"",//时间
  order_no:'',// 采购号
  buyer_customer_id:"",// 客户id
  order_price_start:null,
  order_price_end:null,
  sales_org_id:'',//销售组织
  undertaker_name:'',//销售员
  order_state:'',//订单流转状态
  order_num:'',//订单编号
  barcode:'',
})
/*const statusList = ref([
  { value: 100, label: '待接收' },
  { value: 110, label: "已接收" },
  { value: 111, label: '草稿' },
  { value: 2, label: "已取消" },
  { value: 112, label: '已保存' },
  { value: 113, label: '待审核' },
  { value: 120, label: '待客户确认' },
  { value: 130, label: "客户已确认" },
  { value: 150, label: "订单已付款" },
  { value: 160, label: '已出库' },
  { value: 170, label: "已发出" },
  { value: 180, label: '部分出库' },
  { value: 190, label: "部分发出" },
  // { value: -1, label: '删除' },
  { value: 3, label: '已完成' },
])*/
const statusList = ref([
  { value: 1, label: '待接收' },
  { value: 2, label: "已承接" },
  { value: 3, label: '草稿' },
  { value: 4, label: "已保存" },
  { value: 5, label: '已提交待审核' },
  { value: 6, label: '已审核待付款' },
  { value: 7, label: '待客户确认' },
  { value: 8, label: "客户已确认" },
  { value: 9, label: "已付款待出库" },
  { value: 10, label: "已出库" },
  { value: 11, label: "已发出" },
  { value: 12, label: "部分出库" },
  { value: 13, label: "部分发出" },
  { value: 14, label: "已完成" },
  { value: 15, label: "已取消" },
])
const order_status_list= ref([
  { value: 1, label: '已取消' },
  { value: 2, label: '已保存' },
  { value: 3, label: '已提交' },
  { value: 4, label: '待审核' },
  { value: 5, label: '已审核待付款' },
  { value: 6, label: '已付款待发货' },
  { value: 7, label: '已出库' },
  { value: 8, label: '已发出' },
  { value: 9, label: '已完成' },
])
const undertaker_name_list = ref([])
const goods_name_list = ref<any>([])
const settleOrgUidList = ref<any>([])
const uidList = ref<any>([])
const type = ref(1)
const query = (va: any) => {
  $emits('queryClick',formList.value)
}
// 重置
const resetting = () => {
  formList.value = {
    state:'',//状态，
    product_code:'',// 产品
    product_name:'',
    time:"",//时间
    order_no:'',// 采购号
    buyer_customer_id:"",// 客户id
    order_price_start:null,
    order_price_end:null,
    sales_org_id:'',//销售组织
    undertaker_name:'',//销售员
    order_state:'',//订单流转状态
    order_num:'',//订单编号
    barcode:'',
  }
  $emits('resettingClick',formList.value)
}
const customer_list = ref<any>([])
const sales_org_list = ref<any>([])
const getCustomer=async ()=>{
  // 客户
  await customer_optionsList({is_group:2,name:''}).then((data:any)=>{
    if(data.code == 200){
      customer_list.value = data.data.map((item:any)=> {return {value:item.uid , label:item.name}})
    }
  })
  // 组织
  await  organization_list({}).then((data:any)=>{
    if(data.code == 200){
      sales_org_list.value = data.data.map((item:any)=> {return {value:item.uid , label:item.name}})
    }
  })
/*  // 产品名称
  await getProductList({limit: 2000,page: 1,type: 2}).then((data:any)=>{
    if(data.code == 200){
      goods_name_list.value= data.data.list.map((item:any)=> {return {value:item.number, label:item.name}})
    }
  })*/
  await customerOptions({}).then((data:any)=>{
    if(data.code == 200){
      undertaker_name_list.value =  data.data.undertaker.map((item:any)=> {return {value:item.name , label:item.name}})
    }
  })
  //订单组筛选项
  await orderGroupOptions({type:10}).then((data:any)=>{
    if(data.code == 200){
      settleOrgUidList.value = data.data.customer_order?.map((item:any)=> {return {value:item.order_no , label:item.order_no}})
      uidList.value = data.data.order_uid?.map((item:any)=> {return {value:item.uid , label:item.uid}})
    }
  })
}
const numberValue =()=>{
  if(formList.value.order_price_start != null){
    if( formList.value.order_price_start <= formList.value.order_price_end ){
      formList.value.order_price_end = formList.value.order_price_start
    }
  }

}
onActivated(()=>{
  getCustomer()
})
//抛出数据
defineExpose({
  type,
})
</script>

<style lang="scss" scoped>
@import "../index";
.customerDiv3 {
  :deep() {
    .el-autocomplete {
      width: 100%;
    }
  }
}

.input_many {
  display: inline-block;
  width: 48.8%
}

.button-query {
  display: flex;
  justify-content: flex-end;
  //align-items: center;
  align-items: center;
  height: 32px;
}
</style>

